<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<headerOpreate style="width: 40%;float: left;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div class="block" style="text-align:right;width: 59%;float: right;padding-bottom: 2px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" align="center" type="selection"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="名称" align="center" prop="Name"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="创建时间" align="center" prop="CreatedOn"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="更新时间" align="center" prop="UpdateTime"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="是否有效" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.IsValid">有效</el-tag>
					<el-tag type="danger" v-else>无效</el-tag>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="updateRole(scope.row)"><i class="el-icon-edit el-icon--left"></i>编辑</el-button>
					<el-button type="primary" size="small" @click="editRole(scope.row)"><i class="el-icon-eleg-icon_menu-square_alt el-icon--left"></i>权限分配</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!-- 创建用户 -->
		<el-dialog title="添加权限" v-model="createRoleDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form id="form" ref="createForm" :model="createForm" :rules="createRules" label-width="100px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="createForm.name" required style="max-width:400px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createRoleDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmCreateRole('createForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog title="修改权限" v-model="updateRoleDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form id="updateForm" ref="updateForm" :model="updateForm" :rules="updateRules" label-width="100px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="updateForm.name" required style="max-width:400px"></el-input>
				</el-form-item>
				<el-form-item label="是否有效" prop="isValid">
					<el-radio-group v-model="updateForm.isValid">
						<el-radio :label="1">有效</el-radio>
						<el-radio :label="0">无效</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updateRoleDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmUpdateRole('updateForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	const JSEncrypt = require("jsencrypt"); // 引入模块
	const encrypt = new JSEncrypt.JSEncrypt(); // 实例化加密对象
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				loading: false,
				isReload: false,
				createRoleDialog: false,
				updateRoleDialog: false,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: this.$t("message.refresh"),
						action: 'reloadDatas'
					},
					{
						show: true,
						size: "small",
						type: "primary",
						icon: "el-icon-plus el-icon--left",
						name: "添加",
						action: "createUser"
					},
					{
						show: true,
						size: "small",
						type: "danger",
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "deleteMultiple"
					}
				],
				createForm: {
					name: ''
				},
				updateForm: {
					id: 0,
					name: '',
					isValid: 1
				},
				createRules: {
					name: [{
						required: true,
						message: '请输入权限名称',
						trigger: 'blur'
					}, ],
				},
				updateRules: {
					name: [{
						required: true,
						message: '请输入权限名称',
						trigger: 'blur'
					}, ],
				},
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].KeyId);
				}
				return result;
			},
			//创建
			createUser() {
				this.createRoleDialog = true;
			},
			//确定创建权限
			confirmCreateRole(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var param = {
							name: this.createForm.name,
							isvalid: true,
							UserId: parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/Role/Add', param, function(response) {}, function(response) {
							// console.log('注册用户', response);
							if(response.data.code === 0) {
								this.getDatas();
								this.createRoleDialog = false;
								this.createForm = {
									name: ''
								};
								this.$notify({
									title: '成功',
									message: '用户权限添加成功',
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});

					} else {
						return false;
					}
				});
			},
			//批量删除用户
			deleteMultiple() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将删除所选权限信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/Role/Delete', {
							ids: this.formateSelection(),
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//编辑弹窗
			updateRole(row) {
				this.updateForm.id = row.KeyId;
				this.updateForm.name = row.Name;
				this.updateForm.isValid = row.IsValid ? 1 : 0;
				this.updateRoleDialog = true;
			},
			confirmUpdateRole(formName){
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var param = {
							id: this.updateForm.id,
							name: this.updateForm.name,
							isvalid: this.updateForm.isValid === 1 ? true : false,
							UserId: parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/Role/Update', param, function(response) {}, function(response) {
							// console.log('注册用户', response);
							if(response.data.code === 0) {
								this.getDatas();
								this.updateRoleDialog = false;
								this.$notify({
									title: '成功',
									message: '权限修过成功',
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});

					} else {
						return false;
					}
				});
			},
			//菜单编辑
			editRole(row) {
				this.$emit('changeView', 'Edit', row);
			},

			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].CreatedOn.indexOf("T");
					var index2 = array[i].UpdateTime.indexOf("T");
					array[i].CreatedOn = array[i].CreatedOn.substring(0, index1) + " " + array[i].CreatedOn.substring(index1 + 1, index1 + 9);
					array[i].UpdateTime = array[i].UpdateTime.substring(0, index1) + " " + array[i].UpdateTime.substring(index2 + 1, index2 + 9);
				}
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				//获取权限列表
				HttpServer.httpPost.call(this, '/Api/Role/List', {
					ids: "",
					size: this.pageSize,
					page: this.currentPage,
					filter: '',
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData(response.data.data);
						this.tableData = response.data.data;
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>